<template>
  <div class="like">
    <div class="like-top">
      <span>💕</span>猜你喜欢
    </div>
    <ul>
      <li class="like-list borderbottom"
          v-for="item in likeList"
          :key="item.id">
        <div class="like-img">
          <img :src="item.imgSrc">
        </div>
        <div class="like-text">
          <div class="text-title">{{item.site}}</div>
          <div class="text-judge"> <span>{{item.judge}}</span></div>
          <div class="text-argue">{{item.arguments}}条评论</div>
          <div class="text-price">
            <span>{{item.price}}</span> 起
          </div>
          <div class="text-intro">
            <span>{{item.introduction}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ['likeList'],

}
</script>
<style scoped>
.like {
  margin-top: 0.2rem;
  font-size: 0.28rem;
  background: #fff;
  padding: 0 0.2rem;
}
.like-top {
  padding: 0.2rem 0;
  font-size: 0.32rem;
}
.like-list {
  position: relative;
  padding: 0.2rem 0;
  overflow: hidden;
}
.like-img {
  float: left;
}
.like-list img {
  width: 2rem;
  height: 2rem;
}
.like-text {
  overflow: hidden;
  padding-left: 0.3rem;
}
.text-title {
  font-size: 0.32rem;
  font-weight: bold;
  padding: 0.1rem 0;
}
.text-judge {
  display: inline-block;
  height: 0.5rem;
  color: #ff8300;
  font-size: 0.4rem;
}
.text-argue {
  display: inline-block;
  padding-left: 0.5rem;
}
.text-price {
  padding-top: 0.1rem;
  font-size: 0.2rem;
}
.text-price span {
  color: #ff8300;
  font-size: 0.35rem;
  font-weight: bold;
}
.text-intro {
  font-size: 0.28rem;
  margin-top: 0.2rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>